<!-- 门店配送 -->
<template>
  <div class="mod-config">
    <el-tabs @tab-click="tabChange" v-model="tabValue" type="border-card">
      <el-tab-pane label="未配送配镜单" name="tab1">
        <el-button-group style="margin-bottom: 10px;">
          <el-button type="primary" icon="el-icon-search" @click="searchHandle">查找</el-button>
          <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
          <el-button type="primary" @click="shopSend" :loading="isSend">门店配送</el-button>
          <el-link style="margin-left:15px;float: right;" :href="printUrl" target="_blank" type="info">
            <el-button type="info" @click="getPrintParams">打印单据(品牌)</el-button>
          </el-link>
        </el-button-group>
        <el-form inline label-width="100px" @keyup.enter.native="searchHandle">
          <el-form-item label="配镜单号">
            <el-input v-model="dataForm.saleBillId" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="配镜门店">
            <el-select v-model="dataForm.takeMirroDeptId" disabled>
              <el-option v-for="item in deptOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="avue-crud">
          <el-table :data="dataList" border v-loading="dataListLoading" :max-height="tableHeight1" @selection-change="selectionChangeHandle">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="saleBillId" label="配镜单号">
              <template slot-scope="scope">
                <el-button type="text" @click="checkDetailByOrder(scope.row.saleBillId)">{{scope.row.saleBillId}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="customerName" label="顾客姓名"></el-table-column>
            <el-table-column prop="takeMirroDeptName" label="取镜门店"></el-table-column>
            <el-table-column prop="takeMirroTime" label="取镜时间"></el-table-column>
            <el-table-column prop="saleType" label="配镜类型">
              <template slot-scope="scope">
                <!-- 1-隐形订做,2-框镜订做,3-隐形成品,4-框镜成品,5-辅料-->
                {{getSaleType(scope.row.saleType)}}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已配送配镜单" name="tab2">
        <el-button-group style="margin-bottom: 10px;">
          <el-button type="primary" icon="el-icon-search" @click="searchHandle">查找</el-button>
          <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
        </el-button-group>
        <el-form inline label-width="100px">
          <el-form-item label="配镜门店">
            <el-select v-model="dataForm.deptId" disabled>
              <el-option v-for="item in deptOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="avue-crud">
          <el-table :data="dataList" border v-loading="dataListLoading" :max-height="tableHeight2">
            <el-table-column prop="deliverBillId" label="配送单号"></el-table-column>
            <el-table-column prop="deptName" label="配送门店"></el-table-column>
            <el-table-column prop="deliveryTime" label="配送时间"></el-table-column>
            <el-table-column prop="userName" label="配送人"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button v-if="permissions.eims_delivery_edit" type="text" icon="el-icon-edit" @click="getInfoHandle(scope.row.id)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="门店配送" :visible.sync="dialogShow" @close="closeHandle" width="30%">
      <el-form ref="dataForm" :model="dataForm" :rules="dataRule">
        <el-form-item label="配送人员">
          <!-- <el-select v-model="dataForm.userId" placeholder="请选择" @change="userNameChange($event)">
              <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select> -->
          <el-input v-model="dataForm.workNumber" placeholder="请输入工号" @change="workNumberChange(dataForm.workNumber)"></el-input>
        </el-form-item>
        <el-form-item label="配送人名称">
          <el-input v-model="dataForm.userName" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="shopSendOrder" :loading="ischeck" v-prevent-re-click>确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹窗， 查看详情 -->
    <detail-dialog v-if="detailDialogVisible" ref="detailDialog"></detail-dialog>
    <order-info v-if="infoVisible" ref="infoDialog"></order-info>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from '@/util/tools'
  import { remote } from '@/api/admin/dict'
  import { getDeptInfo } from '@/api/admin/dept'
  import {
    getUnDeliverySaleByPage,
    getDeliveryByPage,
    addDeliveryObj
  } from '@/api/eims/optician/delivery'
  import {
    getUserListNoRole,
    getUserInfo
  } from '@/api/admin/user'

  import DetailDialog from './form'
  import OrderInfo from '@/views/eims/optician/glassesinfo/detail'

  export default {
    data() {
      return {
        ischeck: false,
        isSend: false,
        dialogShow: false,
        tabValue: 'tab1',
        printUrl: '',
        infoVisible: false,
        dataForm: {
          userId: '',
          saleIdList: [],
          deliveryType: "1",
          deptId: '',
          userName: '',
          deptName: '',
          saleBillId: '',
          workNumber: '',
          takeMirroDeptId: ''
        },
        deptOptions: [],
        saleTypeData: [],
        dataList: [],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        dataListLoading: false,
        tab1: {
          dataList: [],
          pageIndex: 1,
          pageSize: 100,
          totalPage: 0,
          dataListLoading: false
        },
        tab2: {
          dataList: [],
          pageIndex: 1,
          pageSize: 100,
          totalPage: 0,
          dataListLoading: false
        },
        selectionList: [],
        userOptions: [],
        detailDialogVisible: false, // 查看信息
        dataRule: {
          userId: [{
            required: true,
            message: '配送人不能为空'
          }]
        }
      }
    },
    components: {
      DetailDialog,
      OrderInfo
    },
    created() {
      this.getDeptList()
      this.dataForm.takeMirroDeptId = this.userInfo.lessDeptId
      this.dataForm.deptId = this.userInfo.lessDeptId
      remote('sale_type').then(result => {
        this.saleTypeData = result.data.data
      })
    },
    computed: {
      ...mapGetters(['permissions', 'userInfo', 'bizData']),
      tableHeight1: function() {
        return window.innerHeight - 260
      },
      tableHeight2: function() {
        return window.innerHeight - 260
      },
    },
    methods: {
      //  查询数据
      searchHandle() {
        this.pageIndex = 1
        this.getDataList()
      },
      tabChange(data) {
        for (let key in this.dataForm) {
          if (key != 'takeMirroDeptId' && key != 'deptId') {
            this.dataForm[key] = ''
          }
        }
        this.getDataList()
      },
      getDataList() {
        //未配送
        this.dataListLoading = true
        if (this.tabValue == 'tab1') {
          this.getUserList()
          let params1 = {
            current: this.pageIndex,
            size: this.pageSize
          }
          let params2 = filterParams(this.dataForm)
          getUnDeliverySaleByPage(Object.assign(params1, params2)).then(response => {
            if(response.data.code == '0'){
              this.dataList = response.data.data.records
              this.totalPage = response.data.data.total
            }else{
              this.$message.error(response.data.msg)
            }
            this.dataListLoading = false
          })
        } else if (this.tabValue == 'tab2') {
          let params1 = {
            current: this.pageIndex,
            size: this.pageSize,
            deliveryType: "1"
          }
          let params2 = filterParams(this.dataForm)
          getDeliveryByPage(Object.assign(params1, params2)).then(response => {
            if(response.data.code == '0'){
              this.dataList = response.data.data.records
              this.totalPage = response.data.data.total
            }else{
              this.$message.error(response.data.msg)
            }
            this.dataListLoading = false
          })
        }

      },
      //  查看配镜单详情
      checkDetailByOrder(order) {
        this.infoVisible = true;
        this.$nextTick(() => {
          this.$refs.infoDialog.init('', order, '配镜单详情');
        });
      },
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 查看
      getInfoHandle(id) {
        this.detailDialogVisible = true
        this.$nextTick(() => {
          this.$refs.detailDialog.init(id)
        })
      },
      //获取配镜类型枚举
      getSaleType: function(value) {
        let obj = {};
        obj = this.saleTypeData.find((item) => {
          return item.value == value;
        });
        if (obj && obj.label) {
          return obj.label
        }
      },
      // 搜索清空
      searchReset() {
        for (let key in this.dataForm) {
          if (key != 'takeMirroDeptId' && key != 'deptId') {
            this.dataForm[key] = ''
          }
        }
      },
      handleSearchShow() {
        this.searchShow = !this.searchShow;
      },
      // 多选表格change事件
      selectionChangeHandle(val) {
        this.selectionList = val
      },

      // 获取员工用户列表
      getUserList(id) {
        getUserListNoRole().then(response => {
          if(response.data.code == '0'){
            let resultData = response.data.data
            let userList = []
            resultData.forEach(item => {
              let userObj = {
                value: item.id,
                label: item.username
              }
              userList.push(userObj)
            })
            this.userOptions = userList
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //根据工号查询员工信息
      workNumberChange(data) {
        getUserInfo(data).then(response => {
          if(response.data.code == '0'){
            this.dataForm.userId = response.data.data.id
            this.dataForm.userName = response.data.data.realName
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //弹框
      shopSend() {
        this.isSend = true
        if (this.selectionList.length) {
          this.dataForm.workNumber = ''
          this.dataForm.userName = ''
          this.dataForm.userId = ''
          this.dialogShow = true
        } else {
          this.isSend = false
          this.$message.warning('请选择配镜单')
        }
      },
      closeHandle(done){
        this.isSend = false
      },
      //点击门店配送接口
      shopSendOrder() {
        if (this.dataForm.userName == '') {
          this.isSend = false
          this.$message.warning('请输入正确的员工工号')
          return
        }
        this.dataForm.saleIdList = [];
        let ids = []
        this.selectionList.forEach(item => {
          ids.push(item.saleId)
        })
        this.dataForm.saleIdList = ids;
        this.ischeck = true
        this.dataForm.deptId = this.userInfo.lessDeptId
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            addDeliveryObj(this.dataForm).then(response => {
              if(response.data.code == '0'){
                this.$message.success("配送成功")
                this.dialogShow = false
                this.getDataList()
              }else{
                this.$message.error(response.data.msg)
              }
              this.isSend = false
              this.ischeck = false
            }).catch(() => {
              this.isSend = false
              this.ischeck = false
            })
          } else {
            this.isSend = false
            this.ischeck = false
          }
        })
      },
      //  查询获取部门列表
      getDeptList() {
        getDeptInfo().then(response => {
          if(response.data.code == '0'){
            this.deptOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //  打印单据
      getPrintParams() {
        let params = '/deliveryInfo.cpt&ids='
        let ids = []
        this.selectionList.forEach(item => {
          ids.push(item.saleId)
        })
        this.printUrl = this.bizData.printUrl + params + ids
      }
    }
  }
</script>
